react有哪些方法改变state

本教程操作环境：Windows10系统、react18.0.0版、Dell G3电脑。

react有哪些方法改变state?

(相关资料图)

在react中正确修改state

一，在react中可以通过this.state.{属性}的方式直接获取state，但当我们想要修改state的时候有许多的坑需要注意，以下 为三种常见的陷阱：

组件直接修改state，并不会重新触发render。列如：

this.state.title="React";

正确修改方式是：

this.setState({title:"React"});

调用setState时，组件state并不会立即改变，而是把要修改的状态放入事件队列中，而react优化了真正的执行时机，并且出于本身性能原因，可能会将多次setState的状态修改合并成一次状态修改。因此不要依靠当前的state计算下一个state，因为当真正执行状态修改时，有时候依赖的this.state并不能保证是最新的state，因为react本身会把多次state合并成一次，这时this.state还是旧state，因此也不能依赖当前的props计算下一个状态，因为props的更新也是异步。如：对于react常用的列子中有一个点击加号数值增加一的操作，点击一次+，数量会加1，如果连续点击两次，还是会加1，这是在react合并修改为一次的情况下，相当与执行了如下代码：

Object.assign(previousState,{quantity:this.state.quantity+1},{quantity:this.state.quantity+1},)

于是后面覆盖前面的操作，最终数值只加1，此时可以使用另一个函数作为参数的setState，这个函数有两个参数，第一个参数是本次组件修改前的状态，第二个参数是当前最新的props。

正确修改方式是：

this.setState((preState, props)=>counter:preState.quantity+1)

当调用ssetState修改组件的状态时，只需要传入发生改变的state，而不是完整的state，因为组件state的更新时一个合并的过程，列如，一个组件的状态为：

this.state={title:"React",content:"React is an wondeful JS library"}

注：当只需要修改title时，将修改的title传给setState即可：

this.setState({title:"ReactJs"});

react会合并最新的title到原来的状态，同时保留原来状态的content，最终合并state为：

this.state={title:"ReactJs,content:""React is an wondeful Js library}

二，state与不可变对象

react官方把state当成不可变对象，一方面直接修改this.state,组件并不会重新render；另一方面，state中包含的所有状态都应该是不可变的对象，当state当中的某一个状态发生变化时，应该重新创建这个状态对象，而不是直接修改原来的state状态，那么当状态发生变化时，如何去创建新的状态呢，我们根据状态类型可以分为下面三种情况：

这种情况最简单，因为状态是不可变类型，所以直接给要修改的状态赋一个新值即可，列如下面我们要修改的count为number型，title（string）,success(bool)三个状态:

this.setState({count:1,title:"React",success:true})

假如有一个数组类型的状态books，当想books中增加一本书时，既可使用数组的concat方法或者es6的扩展语法(apread syntax)

this.setState((preState)=>books:preState.books.concat(["React Guide"]))

this.setState(preState=>books:[...preState,""React Guide])

当我们从books中截取部分元素作为新状态时，可以用数组的slice方法：

this.setState(preState=>books:preState.books.slice(1,3))

当从books中过滤部分元素后，作为新状态时，可以使用filter方法:

this.setState(preState => {        books: preState.books.filter(item => {        return item != "React";        })    })

注意：不要使用push,pop,shift,unshift,splice登方法修改数组类型的状态，因为这些方法都是在原数组的基础上修改的，而concat，slice，filter会返回一个新的数组。

使用es6的Object.assgin()方法

this.setState({onwer:Object.assgin({},preState.onwer,{name:"Jason"});})

使用对象扩展语法（Object spread properties）:

this.setState(preState=>{owner:{...preState.owner,name:"Jason"}})

总结：

创建新的状态的关键是，避免使用会直接修改原对象的方法而是使用可以返回一个新对象的方法，当然可以使用Immutable的JS库（Immutable.js）实现类似的效果。

思考：

为什么React推荐组件状态的修改时不可变对象呢？

三：除了以上方法修改react组件的状态之外，我们还经常会用到replaceState改变组件的状态

replaceState()方法与setState()类似，但是方法只会保留nextState中状态，原state不在nextState中的状态都会被删除。使用语法：

replaceState(object nextState,[, function callback])

nextState，将要设置的新状态，该状态会替换当前的state。

callback，可选参数，回调函数。该函数会在replaceState设置成功，且组件重新渲染后调用。

如：

class App extends React.Component{     constructor(props);      this.state={      count:1      title:"数字计算"      }}handleClick=()=>{  this.replaceState({    count:this.state.count+1  })}render(){    return(      <button onClick={this.onClick}>点我</button>      )  }}

结果为：

{count：1}

以上就是react有哪些方法改变state的详细内容，更多请关注php中文网其它相关文章！

关键词： React state